<template>
  <div class="con">
    <div class="cart">
      <van-icon name="cart" class="a" style="color:white" @click="cart" />
    </div>
    <header>
      <div class="top1">
        <div class="left" @click="onClickLeft">
          <van-icon name="arrow-left" />
          <p>返回</p>
        </div>
        <div class="center">
          <p>{{title}}</p>
        </div>
        <div class="right">
          <van-icon name="exchange" class="change" />
        </div>
      </div>
    </header>

    <main>
      <van-tabs
        v-model="active"
        title-active-color="red"
        background="snow"
        line-width="0"
        swipeable
      >
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-tab>
            <div slot="title">推荐</div>
            <div>
              <figure @click="detail(item.pid)" v-for="(item,i) in list" :key="i">
                <div class="ig">
                  <img :src="item.pimg" alt />
                </div>
                <figcaption>
                  <p>{{item.pname}} &nbsp;&nbsp;{{item.pdesc}}</p>
                  <span>￥{{item.pprice}}</span>
                </figcaption>
              </figure>
            </div>
          </van-tab>

          <van-tab>
            <div slot="title" class="spec">
              <span>价格</span>
              <van-icon name="shrink" />
            </div>

            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
          </van-tab>

          <van-tab>
            <div slot="title">销量</div>

            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
            <figure>
              <div class="ig">
                <img src alt />
              </div>
              <figcaption>
                <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                <span>￥208</span>
              </figcaption>
            </figure>
          </van-tab>
          <van-tab>
            <div slot="title" class="spec" @click="alertwindow">
              <span>筛选</span>
              <van-icon name="filter-o" />
            </div>

            <van-popup v-model="show" position="right" :style="{ height: '100%',width:'80%' }">
              <div class="tanwindow">
                <div class="top">
                  <p>品牌</p>
                  <van-collapse v-model="activeName" accordion>
                    <van-collapse-item title="全部" name="1" class="all">
                      <div class="sort1">
                        <b>澳速</b>
                        <b>JBS</b>
                        <b>邦扣食品</b>
                        <b>波拉佤</b>
                        <b>棒棰岛</b>
                        <b>草原帝都</b>
                        <b>诚德旺</b>
                        <b>潮香村</b>
                        <b>东大滩</b>
                        <b>澳速</b>
                        <b>JBS</b>
                        <b>邦扣食品</b>
                        <b>波拉佤</b>
                        <b>棒棰岛</b>
                        <b>草原帝都</b>
                        <b>诚德旺</b>
                        <b>潮香村</b>
                        <b>东大滩</b>
                        <b>澳速</b>
                        <b>JBS</b>
                        <b>邦扣食品</b>
                        <b>波拉佤</b>
                        <b>棒棰岛</b>
                        <b>草原帝都</b>
                        <b>诚德旺</b>
                        <b>潮香村</b>
                        <b>东大滩</b>
                      </div>
                    </van-collapse-item>
                  </van-collapse>
                </div>

                <div class="center">
                  <div class="sort">
                    <p>澳速</p>
                    <p>JBS</p>
                    <P>邦扣食品</P>
                    <p>波拉佤</p>
                    <p>棒棰岛</p>
                    <p>草原帝都</p>
                    <p>诚德旺</p>
                    <p>潮香村</p>
                    <p>东大滩</p>
                  </div>

                  <div class="pprice">
                    <p class="fanwei">价格区间</p>
                    <div class="ptop">
                      <p>最低价</p>
                      <strong style="font-size:18px;color:#999999">-</strong>
                      <p>最高价</p>
                    </div>
                    <div class="pbottom">
                      <p>0-399</p>
                      <p>400-799</p>
                      <p>800-1199</p>
                      <p>1200-1599</p>
                      <p>1600-1999</p>
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <p>重置</p>
                  <span @click="sub">提交</span>
                </div>
              </div>
            </van-popup>

            <div v-if="showsselect">
              <figure>
                <div class="ig">
                  <img src alt />
                </div>
                <figcaption>
                  <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                  <span>￥208</span>
                </figcaption>
              </figure>
              <figure>
                <div class="ig">
                  <img src alt />
                </div>
                <figcaption>
                  <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                  <span>￥208</span>
                </figcaption>
              </figure>
              <figure>
                <div class="ig">
                  <img src alt />
                </div>
                <figcaption>
                  <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                  <span>￥208</span>
                </figcaption>
              </figure>
              <figure>
                <div class="ig">
                  <img src alt />
                </div>
                <figcaption>
                  <p>奇异农庄(KiwFarm)新西兰进口牛腱500g*2袋送新西兰西冷牛排150g*1袋</p>
                  <span>￥208</span>
                </figcaption>
              </figure>
            </div>
          </van-tab>
        </van-pull-refresh>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import * as api from "../../api/getproductlist";
export default {
  name: "Detail",
  data() {
    return {
      isLoading: false,
      active: 0,
      show: false,
      activeName: "2",
      list: [],
      list1: [],
      title: "",
      showsselect: false
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 500);
    },
    onClickLeft() {
      this.$router.push("/sort");
    },
    alertwindow() {
      this.show = true;
    },
    sub() {
      this.show = false;
      this.showsselect = true;
    },
    detail(id) {
      console.log(location.href);
      this.$router.push("/detailpro/" + id);
    },
    cart() {
      this.$router.push("/cart");
    }
  },
  mounted() {
    api
      .getkindpro({
        classid: this.$route.query.classid,
        kindid: this.$route.query.kindid
      })
      .then(res => {

        this.list = res.data.data;
      });

    api.getkind({ classid: 1 }).then(data => {
      this.list1 = data.data.data;
    });
    this.title = this.$route.query.title;
  }
};
</script>

<style scoped>
.van-tab__pane {
  min-height: 600px;
}
* {
  margin: 0;
  padding: 0;
}
.con {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
header {
  height: 46px;
}
header .top1 {
  height: 46px;
  display: flex;
  margin: 0 10px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: #414141;
}
header .left {
  display: flex;
  align-items: center;
  font-size: 14px;
}
header .left p {
  margin-left: 5px;
}
header .change {
  font-size: 24px;
}
header .right {
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  flex: 1;
  overflow: auto;
}
.con .cart {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.con .a {
  color: white;
  font-size: 24px;
}
.spec {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spec span {
  margin-right: 3px;
}
.van-ellipsis {
  display: flex;
  align-items: center;
}
.van-tabs__line {
  background-color: white;
}
.con figure {
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #f3f3f3;
}
.ig {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.con figure img {
  display: block;
  width: 80px;
  height: 80px;
  background: tomato;
}
.con figure figcaption {
  width: 200px;
  margin-left: -7px;
}
.con figure figcaption p {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
}
.con figure figcaption span {
  font-size: 14px;
  color: #ef2d23;
  font-weight: 600;
  display: block;
  margin-top: 5px;
}

.tanwindow .all {
  margin-left: -20px;
  margin-right: -5px;
}
.tanwindow b {
  margin-right: 1px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 40px;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
}
.tanwindow .sort1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: auto;
}
.tanwindow {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tanwindow .top {
  padding: 0 5px;
  display: flex;
  height: 40px;
  justify-content: space-between;
}
.tanwindow .top p {
  line-height: 40px;
  font-size: 18px;
  color: #404040;
}

.tanwindow .center {
  padding: 0 5px;
  flex: 1;
  overflow: auto;
}
.tanwindow .sort {
  padding: 0 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tanwindow .sort p {
  margin-top: 10px;
  width: 90px;
  height: 40px;
  font-size: 14px;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tanwindow .suo {
  padding-left: 5px;
}
.tanwindow .suo p {
  height: 40px;
  font-size: 12px !important;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
}

.tanwindow .pprice {
  margin-top: 10px;
}
.tanwindow .fanwei {
  font-size: 18px;
}
.tanwindow .ptop {
  display: flex;
  justify-content: space-between;
  margin: 5px;
  margin-top: 10px;
  align-items: center;
}

.tanwindow .ptop p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 130px;
  height: 35px;
  background: #f1f1f3;
  border-radius: 5px;
  color: #ababab;
}
.tanwindow .pbottom {
  padding: 0 5px;
  display: flex;
  flex-wrap: wrap;
}
.tanwindow .pbottom p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 6px;
  width: 86px;
  height: 40px;
  font-size: 14px;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
}

.tanwindow .bottom {
  height: 46px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  border-top: 1px solid #333;
  box-sizing: border-box;
}
.tanwindow .bottom p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  width: 50%;
}
.tanwindow .bottom span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  width: 50%;
  background: #ee391e;
}
</style>